<template>
	<view>
		<view>
			<l-painter  ref="painter" @success="createSuccess" @fail="createSuccess"  @down="createSuccess" @progress="createSuccess">
			  <!-- 基础用法 -->
			  <l-painter-view css="width: 560rpx; height: 800rpx;background:#ffffff;margin-left:70rpx;margin-top:100rpx;padding:20rpx;border-radius:20rpx;">
					<l-painter-text css="color:#666666;font-size:24rpx;width:100%;" :text="share_username"></l-painter-text> 
					<l-painter-text css="color:#333333;font-size:28rpx;margin-top:20rpx;text-align:left;width:100%;" :text="share_title"></l-painter-text> 
					
					<l-painter-qrcode
					  :text="qrcode_url"
					  css="width:320rpx; height: 320rpx;position:absolute;top:250rpx;left:100rpx;border-radius:10rpx;"
					/>
					<l-painter-image
					  :src="logo"
					  css="width: 80rpx; height: 80rpx;position:absolute;top:360rpx;left:220rpx;border-radius:50%;" 
					/>
					<l-painter-text css="width:100%;color:#666666;font-size:24rpx;position:absolute;top:600rpx;left:-20rpx;text-align:center;" :text="share_tip"></l-painter-text> 
					<l-painter-view css="left:-20rpx;width: 560rpx; height: 50rpx;position:absolute;bottom:10rpx;right:0rpx;display:flex;align-items:center;justify-content:flex-end;">
						<l-painter-image
						  :src="logo"
						  css="width: 50rpx; height: 50rpx;bottom:10rpx;border-radius:50%;display:inline-block;" 
						/>
						<l-painter-text css="color:#666666;font-size:26rpx;display:inline-block;width:200rpx;margin-left:10rpx;" :text="site_name"></l-painter-text> 
					</l-painter-view>
					
			  </l-painter-view>
			  
			  
			</l-painter>
		</view>
		
		<view class="sub-button" @tap="saveDown" v-show="saveDownStatus">
			保存到手机
		</view>
	</view>
</template>

<script>
	import lPainter from "@/components/share-poster/l-painter/l-painter.vue";
	import lPainterView from "@/components/share-poster/l-painter-view/l-painter-view.vue"; 
	import lPainterText from "@/components/share-poster/l-painter-text/l-painter-text.vue"; 
	import lPainterImage from "@/components/share-poster/l-painter-image/l-painter-image.vue"; 
	import lPainterQrcode from "@/components/share-poster/l-painter-qrcode/l-painter-qrcode.vue"; 
	 
	//插件地址 https://ext.dcloud.net.cn/plugin?id=2389
	export default {
		components:{
			lPainter,
			lPainterImage,
			lPainterView,
			lPainterText,
			lPainterQrcode
		},
		data() {
			return {
				saveDownStatus:true,
				share_username:'',
				share_title:'',
				qrcode_url:'',
				share_tip:'微信扫码或长按识别',
				logo:'',
				site_name:''
			}
		},
		onLoad() {
			this.initInfo();
			this.$api.loadingMsg('');
		},
		methods: {
			initInfo(){
				var myconfig = this.myconfig;
				this.logo = myconfig.site_logo;
				var site_name = this.$api.getSystemConfig('wxMiniProgram.xcx_name');
				this.site_name = site_name;
				var posterData = uni.getStorageSync('share-poster-data');
				this.share_title = (posterData.title && posterData.title.length > 26)?posterData.title.substr(0,26)+'...':posterData.title;
				this.share_title = this.share_title.trim();
				var nickname = posterData.nickname?posterData.nickname.trim():site_name;
				this.share_username = '分享自 '+nickname;
				this.qrcode_url = posterData.qrcodeUrl?posterData.qrcodeUrl:site_name;
				uni.removeStorageSync('share-poster-data');
				//console.log(this.share_title,this.share_username,this.qrcode_url)
			},
			createSuccess(e){
				if(typeof e == 'number' && e == 1)
				{
					uni.hideLoading() 
				}
				
			},
			saveDown(){
				var that = this;
				that.$api.checkPhotoRecord(function(){
					that.$api.loadingMsg('正在生成');
					that.$refs.painter.canvasToTempFilePathSync({
						fileType: "png",
						// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
						pathType: 'url',
						quality: 1,
						success: (res) => {
							uni.hideLoading();
							var tempFilePath = res.tempFilePath;
							that.$api.showModal('','确认保存到相册',function(res){
								if(res == 'yes')
								{
									// 非H5 保存到相册
									uni.saveImageToPhotosAlbum({
										filePath: tempFilePath,
										success: function () {
											that.$api.msg('保存成功')
										},
										fail:function(){
											that.$api.msg('保存失败')
										}
									}); 
								}
							})
							
						},
						fail:(res)=>{
							uni.hideLoading();
							that.$api.msg('生成海报失败')
						}
					});
				})
				
			}
		}
	}
</script>

<style lang="scss">
.sub-button{
		width: 90%;
		height: 80rpx;
		background: $uni-btn-color;
		border-radius: 60rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		letter-spacing: 6rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 50rpx;
		left: 5%;
	}
</style>
